{% extends 'base.html' %}

{% block title %}3T - {{game.name}}'s Game{% endblock %}

{% block styles %}
  <!--
  div#tictactoebox { width: 211px; height: 210px; padding: 5px; border: 1px solid #ccc; }
  #tictactoebox .box { display: block; border: 1px solid #ccc; width: 68px; height: 68px; text-align: center; vertical-align: middle; font-size: 20px; float: left; overflow:hidden; line-height: 68px; }
  div.box.selectable:hover { background-color: #ccc; }
  div.box.selectable { text-indent: -9999px; cursor: pointer; }
  div.box.inactive { text-indent: -9999px; cursor: normal; }
  div.box.inactive:hover { background-color: none; }
  div#quit { font-size: 10px; margin-top: 20px; }
    div#quit a { font-size: 10px; }
  -->
{% endblock %}

{% block contents %}
<h1>{{game.name}}'s Game</h1>
<h2 id="message">Loading...</h2>
<div id="tictactoebox">
  <div id="box_0" class="box inactive">O</div>
  <div id="box_1" class="box inactive">O</div>
  <div id="box_2" class="box inactive">O</div>
  <div id="box_3" class="box inactive">O</div>
  <div id="box_4" class="box inactive">O</div>
  <div id="box_5" class="box inactive">O</div>
  <div id="box_6" class="box inactive">O</div>
  <div id="box_7" class="box inactive">O</div>
  <div id="box_8" class="box inactive">O</div>
</div>
<div id="quit"><a href="/">quit game</a></div>
{{x}}{{o}}{{state}}{{hostmove}}
{% endblock %}

{% block scripts %}
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    var lastState = false;
    var reloadInterval = false;
    var timeoutTimer = false;
    google.load("jquery", "1"); // Load jQuery
    // on page load complete, reload the status
    google.setOnLoadCallback(function(){
        reloadBox();
        $("div.box").click(function(){
			if($(this).attr("class") == "box selectable")
			{
	            id = $(this).attr("id").split("_")[1];
	            reloadBox(true,id);
			}
        });
    });
    
    function reloadBox(move,id){
        var data = {}
        if (move) {
            data['action'] = 'move';
            data['move'] = id;
        }
        else data['action'] = 'list';
        $.ajax({
            type: "POST",
            async: true,
            url: window.location.href.href,
            data: data,
            dataType: "json",
            success: function(res){
		msg = "";
		myturn = false;
		lastState = res;
                if (!res.success) 
                    alert('An error occured. Details: x:'+ res.os + ' y:'+ res.xs);
		switch (res.state)
		{
		    case 0: msg = "Host Wins"; break;
		    case 1: msg = "Client Wins"; break;
		    case 2: msg = "Draw"; break;
		    case 3: 
			msg = "Host Turn.. Waiting for opponent to move..";
			if (res.isplayer && res.ishost) { msg = "Your Turn (Host)"; myturn = true; }
			break;
		    case 4: 
			msg = "Client Turn.. Waiting for opponent to move.."; 
			if (res.isplayer && !res.ishost) { msg = "Your Turn (Client)"; myturn = true; }
			break;
		    case 5: msg = "Waiting for another player to join..."; break;
		}
                if (!res.isplayer)
                    msg = "[Observing game]" + msg;
		if ($('#message').text() != msg)
		{
		    $("#message").hide().text(msg).fadeIn("slow");
		    if (res.state <= 2) onTimeout(); // finished. stop auto reload.
		    else renewSession();
		    printBox(res.o, res.x, myturn, res.ishost);
		}
            }
        });
    }
    
    function printBox(o, x, playmode, ishost){
        $("div.box").removeClass("selectable").addClass("inactive");
        for (i in o) $("#box_"+o[i]).text("O").removeClass("inactive");
        for (i in x) $("#box_"+x[i]).text("X").removeClass("inactive");
        if (playmode) {
			$("div.box.inactive").addClass("selectable").removeClass("inactive");
        }
    }

    function renewSession() {
	clearInterval(timeoutTimer);
	clearInterval(reloadInterval);
	reloadInterval = setInterval("reloadBox()", 4000);
	timeoutTimer = setTimeout(onTimeout, 120000);
    }
    
    function onTimeout() {
	clearInterval(reloadInterval);
    }
</script>
{% endblock %}